<template>
  <div id="commonCheck">
    <el-row :gutter="20">
      <el-col :span="12">
        应收: {{checkInfo.total_price}}
      </el-col>
      <el-col :span="12">
        实收: {{checkInfo.total_price}}
      </el-col>
    </el-row>
  
    <div style="margin: 20px">
      支付方式：
      <el-button slot="reference" @click="check_type=1">现金支付</el-button>
      <el-popover
        placement="bottom"
        title="请打开微信扫一扫"
        width="200"
        v-model="payway.wechat_visible"
        >
        <img style="width: 160px;" :src="payway.zhifubao_imgbase64" alt="">
        <el-button slot="reference" @click="showWechat">微信支付</el-button>
      </el-popover>
      <el-popover
        placement="bottom"
        title="请打开支付宝扫一扫"
        width="200"
        v-model="payway.zhifubao_visible"
        >
        <img style="width: 160px;" :src="payway.zhifubao_imgbase64" alt="">
        <el-button slot="reference" @click="showZhifubao">支付宝支付</el-button>
      </el-popover>
    </div>
    
    <div class="btn-wrapper" style="text-align: center">
      <el-button type="primary" @click="checkEnd">结账</el-button>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs'
  import {mapActions} from 'vuex'
  export default {
    name: "CommonCheck",
    props: ['checkInfo'],// 应收款项  和账单信息
    data(){
      return{
        payway: {
          pay_zhifubao: '',
          zhifubao_imgbase64: '',
          zhifubao_visible: false,
          wechat_visible: false,
          pay_wechat: ''
        },
        check_type: 2,
      }
    },
    methods: {
      ...mapActions('bills/',['pay','deleteBill']),
      // todo: 结账成功,需要把餐桌状态变为可用 this.checkInfo.seatNumber
      checkEnd(){
        let params ={
          mainId: this.checkInfo.orderId,
          payType: this.check_type,
          price: this.checkInfo.total_price,
          userId: 0
        }
        console.log('结账参数',params)
        return this.pay(params).then(res => {
          if (res === 'success') {
            this.$message.success('结账成功')
            //跳转成功页面 并且删除这条数据
            this.deleteBill(this.checkInfo.seatNumber)
            this.$router.push('/frontHome')
          }
        })
      },
      showZhifubao(){
        this.check_type=3
        if (this.payway.pay_zhifubao) {
          // 关闭二维码
          return this.payway.pay_zhifubao = !this.payway.pay_zhifubao
        }
        // 先请求二维码，之后将二维码渲染到 img 上
        this.getErWeiMa()
      },
      showWechat(){
        this.check_type=4
        if (this.payway.pay_wechat) {
          // 关闭二维码
          return this.payway.pay_wechat = !this.payway.pay_wechat
        }
        // 先请求二维码，之后将二维码渲染到 img 上
        this.getErWeiMa()
      },
      getErWeiMa() {
        console.log(this.checkInfo)
        let checkObj = this.checkInfo
        delete checkObj.dishes
        console.log('处理后的check',checkObj)
        let key = 'f3421afb0d04677f76eed2d4468139d0'
        let url = 'http://apis.juhe.cn/qrcode/api?key='+key+'&text='+JSON.stringify(checkObj)
        axios({
          url: 'https://bird.ioliu.cn/v1/?url='+url,
          method: 'get'
        }).then(res => {
          if (res.data.reason =='success') {
            this.payway.zhifubao_imgbase64 = 'data:image/png;base64,'+res.data.result.base64_image
          }
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
</script>

<style lang="less" scoped>
#commonCheck {
  width: 60%;
}
</style>
